<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="count++">改变count的值 {{ count }}</button>
    <button @click="person.age++">修改person的age值 {{ person }}</button>
    <button @click="person.hobby.push('篮球')">
      修改person中hobby的值 {{ person }}
    </button>
    <button @click="person.score.ch.push(100)">修改person中的score属性</button>
    <button @click="person.score = { ch: [], math: [] }">
      替换person中的score属性
    </button>
    <button @click="person.age++">修改age</button>
    <button @click="person.score.math = [1, 2, 3, 4]">
      替换person中的score属性中的某个值
    </button>
    <button
      @click="
        person = {
          name: 'xiaoli',
          age: 30,
          hobby: [],
          score: { ch: [], math: [] },
        }
      "
    >
      改变person的值 {{ person }}
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";

//watch监听1:ref对象,值是一个基本类型
let count = ref(0);
watch(
  count,
  (newVal, oldVal) => {
    console.log("count变化了,ref对象,值是一个基本类型", newVal, oldVal);
  },
  { immediate: true }
);

//watch监听2:ref对象 值是一个对象类型
let person = ref({
  name: "laowang",
  age: 18,
  hobby: ["唱", "跳", "rap"],
  score: {
    ch: [90, 80, 60, 40],
    math: [40, 70, 90, 98],
  },
});

//1.直接监听ref对象,则只能监听到当前ref对象中的值被替换,如果想要监听ref对象内代理对象的改变,则需要深度监听
/* watch(
  person,
  (newVal, oldVal) => {
    console.log("person修改了", newVal, oldVal);
  },
  { deep: true }
); */

//监听ref对象的value属性,默认开启深度监听
/* watch(person.value, (newVal, oldVal) => {
  console.log("person修改了", newVal, oldVal);
}); */

//监听ref对象中某一个具体的属性值,值是对象类型:默认开启深度监听
/* watch(
  () => person.value.score,
  () => {
    console.log("score中发生修改");
  }
); */

//监听ref对象中某一个具体的属性值:值是基本类型
/* watch(
  () => person.value.age,
  (newVal, oldVal) => {
    console.log("age发生改变了");
  }
); */

//监听多个
watch([count, person.value], () => {
  console.log("监听多个");
});
</script>
